<template>
	<view class="cart">
		<view class="ul">
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" v-for="(item,index) in getCarList" v-if="item.show == false"
					@click="bindClick(item)" @change="swipeChange($event, index)" autoClose  :key="index"> 
					<view class="li">
						<view class="shop">
							<view class="rabio">
								<image src="../../static/cz_zc@2x.png" v-show="item.selected == false" @click="select(item)"></image>
								<image src="../../static/cz_xz@2x.png" v-show="item.selected == true" @click="select(item)"></image>
							</view>
							<view  class="shop-deltail" @click="toDetail(item.goodId)">
								<view class="good-image">
								<image :src="item.goodImg"></image>
								</view>
								<view class="name">
									<view class="header">{{item.goodName}}</view>
									<view class="price">￥{{item.goodPrice}}</view>
									<view class="price2">￥{{price(item)}}</view>
								</view>
							</view>
						</view>
						<view class="box">
							<u-number-box 
							class="number-box"
								v-model="item.count"
							    button-size="30"
							    color="#939395"
							    iconStyle="color: #969697"
								 @change="onchange(item)"
							></u-number-box>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<u-empty :show="getCartLen == 0?true:false" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png" >
			</u-empty>
		</view>
		<view class="btn">
			<view class="quan">
				<image src="../../static/cz_zc@2x.png" v-show="isShow == false" @click="quan()"></image>
				<image src="../../static/cz_xz@2x.png" v-show="isShow == true" @click="quan()"></image>
				<view class="text">全选</view>
			</view>
			<view class="buttom">
				<view class="sum">合计:<text>￥{{sumPrice}}</text></view>
				<u-button shape="circle" type="error" @click="addOrder()">结算</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {apiCartGoods} from '../../api/mock.js'
	import {mapGetters,mapActions} from 'vuex'
	export default {
		data() {
			return {
				show: false,
				carts:this.getCarList,
				isShow:false,
				check:[],
				order:{},
				isDel:0,
				 options:[
				        {
				            text: '删除',
				            style: {
				                backgroundColor: '#dd524d',
								color:'#ffffff'
				            }
				        }
				      ]
			}
		},
		onLoad() {
			this.isShow = false;
		},
		watch:{
			getCarList(e){
				if(e.length>0){
					this.ifShow();
				}
			}
		},
		computed:{
			...mapGetters('carts',['getCarList','getCartLen']),
			...mapGetters('orders',['getOrderList']),
			price(){
				return (item) =>{
					let sum = item.goodPrice*item.count;
					return sum;
				}
			},
			sumPrice(){
				let sumPrice = 0;
				console.log(this.getCarList);
				this.getCarList.forEach((item)=>{
					if(item.selected==true && item.show == false){
						sumPrice += item.goodPrice*item.count;
					}
				});
				return sumPrice;
			}
		},
		methods: {
			...mapActions('orders',['addOrders','delOrders']),
			...mapActions('carts',['UpCart']),
			addOrder(){
				this.delOrders();
				let shop = this.getCarList.filter(index => index.selected == true && index.show == false);
				if(shop.length == 0){
					uni.showToast({
						icon:'error',
						title:'请选择商品'
					})
					return;
				}
				this.getCarList.forEach((item)=>{
					if(item.selected){
						this.addOrders(item);
						item.show = true;
						this.UpCart(item);
					}
				})
				uni.navigateTo({
					url:'/pagesD/pay-detail/pay-detail'
				})
			},
			toDetail(id){
				uni.navigateTo({
					url:'/pagesA/detail/detail?id='+id,
				})
			},
			bindClick(e){
			      uni.showModal({
			      	title:'提示',
			      	content:'是否删除当前购物车',
			      	success:(res)=>{
			      		if(res.confirm){
							e.show = true
							e.selected = false;
							this.UpCart(e)
			      			uni.showToast({
			      				title:'删除成功',
			      			})
			      			this.ifShow();
			      		}else if(res.cancel){
			      			uni.showToast({
			      				title:'已取消',
			      				icon:'none'
			      			})
			      		}
			      	}
			      })
				
			},
		    swipeChange(e,index){
			      console.log('当前状态：'+ e +'，下标：' + index)
			},
			onchange(item){
				setTimeout(()=>{
					item.selected = true;
					this.UpCart(item);
					this.ifShow();
				},100)
				
			},
			select(item){
				item.selected = !item.selected;
				console.log(item);
				this.UpCart(item);
				this.ifShow();
			},
			quan(){
				this.isShow = !this.isShow;
				this.getCarList.forEach((item)=>{
					if(this.isShow){
						item.selected = true;
					}else{
						item.selected = false;
					}
				})
			},
			// getCartGoods(){
			// 		this.carts=[...this.getCarList];
			// 	    console.log(this.carts);
			// },
			ifShow(){
				console.log(this.getCarList.length);
				let len = this.getCarList.filter(index => index.selected == true && index.show == false).length;
				console.log(len);
				let len1 = this.getCarList.filter(j => j.show == false).length;
				console.log(len1);
				if(len == len1 && len1>0){
					this.isShow  = true;
				}else{
					this.isShow  = false;
				}
			}
		}
	}
</script>

<style lang="scss">
	.cart{
		padding: 10px;
		position: relative;
		.ul{
			padding-bottom: 60px;
			width: 100%;
			.li{
				width: 100%;
				margin-top: 10px;
				.shop{
					display: flex;
					.shop-deltail{
						display: flex;
						overflow: hidden;
						.good-image image{
							width: 100px;
							height: 100px;
						}
						.name{
							overflow: hidden;
							padding: 5px;
							.header{
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								font-size: 15px;
								color: gray;
							}
							.price{
								font-size: 12px;
								color: gainsboro;
								margin-top: 10px;
							}
							.price2{
								font-size: 20px;
								margin-top: 10px;
							}
						}
					}
					.rabio{
						padding: 10px;
						margin: auto;
					}
					.rabio image{
						width: 20px;
						height: 20px;
					}
				}
				.box{
					width: 100%;
					overflow: hidden;
					/*#ifdef  MP-WEIXIN*/
					margin-left: 60%;
					/*#endif*/
					.number-box{
						float: right;
					}
					
				}
			}
		}
	.btn{
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-weight: bold;
		position: fixed;
		/*#ifdef H5*/
		bottom: 50px;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		bottom: 0px;
		/*#endif*/
		/*#ifdef  MP-WEIXIN*/
		bottom: 0px;
		/*#endif*/
		background-color: white;
		left: 0;
		z-index: 100;
		.quan{
			float: left;
			display: flex;
		}
		.buttom{
			float: right;
			display: flex;
			.sum text{
				padding: 10px;
				font-weight: 400;
				color: red;
			}
		}
		.buttom button{
			width: 80px;
			height: 40px;
			margin: auto;
			line-height: 40px;
			margin-right: 10px;
		}
	}
	.btn image{
		width: 20px;
		height: 20px;
		padding: 15px;
	}
}
</style>
